<template>
  <div id="liveRankRoot">
    <search
      v-model="valueSerach"
      :active="active"
      @returnBack="returnBack"
      @returnBack1="returnBack1"
      @inputValue="inputValue"
    />
    <div>
      <van-tabs
        :offset-top="$tabNavTopVal"
        v-model="active"
        title-active-color="#222"
        title-inactive-color="#888"
        sticky
        swipeable
        swipe-threshold="3"
      >
        <van-tab title="直播带货榜">
          <HourRank :valueSerach="valueSerach" v-if="active == 0" ref="refs1" />
        </van-tab>
        <van-tab title="直播达人榜">
          <LiveTalentRank :valueSerach="valueSerach" v-if="active == 1" ref="refs" />
        </van-tab>
        <van-tab title="直播爆品榜">
          <LiveGoodsRank :valueSerach="valueSerach" v-if="active == 2" ref="refs2" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import HourRank from '@/pages/live/liveRank/hourRank.vue';
import search from '@/component/search';
import LiveTalentRank from '@/pages/live/liveRank/liveTalentRank.vue';
import LiveGoodsRank from '@/pages/live/liveRank/liveGoodsRank.vue';
export default {
  name: 'liveRankRoot',
  components: { HourRank, LiveTalentRank, LiveGoodsRank, search },
  data() {
    return {
      active: 0,
      valueSerach: '',
      newvalue1: ''
    };
  },
  computed: {},

  watch: {
    active(newvalue) {
      this.valueSerach = '';
      if (window.pageYOffset != 0) {
        window.pageYOffset = 1;
      }
    },
    valueSerach: function () {
      // console.log(121);
    }
  },
  activated() {
    if (this.$route.query.tab != undefined) {
      this.active = Number(this.$route.query.tab);
    }
  },
  created() {},
  mounted() {},

  methods: {
    returnBack(a) {
      this.valueSerach = this.trimStr(a);
      if (this.active == 0) {
        this.$refs.refs1.search(this.valueSerach);
      } else if (this.active == 1) {
        this.$refs.refs.search(this.valueSerach);
      } else {
        this.$refs.refs2.search(this.valueSerach);
      }
    },
    returnBack1(a) {
      if (a) {
        // 搜索框为空时重新调接口
        if (this.active == 0) {
          this.$refs.refs1.search(a);
        } else if (this.active == 1) {
          this.$refs.refs.search(a);
        } else {
          this.$refs.refs3.search(a);
        }
      }
    },
    // 搜索框为空的时候榜单刷新页面
    inputValue(val) {
      this.valueSerach = val;
    }
  }
};
</script>
<style lang='less' scoped>
//@import url();
#liveRankRoot {
  min-height: 100vh;
  background: #f1f1f1;
}
</style>